<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
       main start        main size      main end
            ------------main axis---------->
cross start |
            |
            |
cross size  | cross axis
            |
            |
  cross end |
    */
    /* 
         应用在flex container上的CSS属性
            口flex-flow    复合属性，等同于flex-direction和flex-wrap的简写,等同于flex-direction: row; flex-wrap: nowrap;
            口flex-direction flex方向，默认是row(水平),column(垂直),row-reverse(水平反向),column-reverse(垂直反向)
            口flex-wrap flex换行，默认是nowrap(不换行),wrap(换行),wrap-reverse(反向换行)
            口justify-content flex主轴对齐方式，默认是flex-start(起始位置),flex-end(结束位置),center(居中),space-between(两端对齐,项目之间的间隔相等),space
            口align-items flex交叉轴对齐方式，默认是stretch(拉伸),flex-start,flex-end,center,baseline,first baseline,last baseline
            口align-content 多轴对齐方式，默认是stretch(拉伸),flex-start,flex-end,center,space-between,space-around

         应用在flex items上的CSS属性
            口flex-grow flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
            口flex-basis flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目的本来
            口flex-shrink flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
            口order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。
            口align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-self属性，如果没有父元素，则等同于stretch。
            口flex 复合属性，等同于flex-grow, flex-shrink 和 flex-basis的简写。默认值为0 1 auto。后两个属性可选。
    */
    .box {
      display: flex;
      background-color: #f00;

      flex-wrap: wrap;  /* 默认值nowrap，不换行 */

      width: 200px;
      height: 200px;
    }

    .item {
      width: 60px;
      height: 60px;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <!-- aaaa -->
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
  <!-- bbb -->

</body>
</html>